import React, { Component } from 'react'
import { Text, StyleSheet, View, SafeAreaView, TouchableOpacity, Image, ScrollView, TextInput, Modal } from 'react-native'


import {
    width,
    titleHeight,
    deviceWidth,
    unitWidth,
    statusBarHeight,
    reallySize,
} from '../../utils/Global';
import ImagePicker from 'react-native-image-crop-picker';
import Toast from 'react-native-root-toast';
import Layer from '../../utils/Layer'
import fetchWebApi from '../../public/WebApi/fetchBase';
import { POST_USER_SOCIALCIRCLE, POST_ALBUMINFDOATA_UPLOAD, GET_USER_SOCIALCIRCLEPUBLISH_TOPIC } from '../../public/WebApi/socialcircleApi';
import getStorageValue from '../../utils/getStorageValue';
import { Constant } from '../../public/js/constant';
import RNFS from 'react-native-fs'
import AsyncStorage from '@react-native-community/async-storage';
import { socialEllipsis } from '../../utils/publicMethodList'
import Loading from '../../components/Loading';
import { GetLocation } from '../../utils/GetLocation'

export default class publish extends Component {
    constructor(props) {
        super(props)
        // this.onChangeText = this.onChangeText.bind(this);
        this.state = {
            title: "发布社圈",
            leftItem: "取消",
            rightItem: "发布",

            //话题列表显示
            isTopicListShow: false,

            //获取标题内容
            showInputValueTitle: '',

            //获取正文内容
            showInputValueContent: '',

            //正文限制字数
            inputMaxLength: 500,

            //删除按钮
            imageDelete: require('../../assets/images/socialcircle/delete_mark.png'),

            //地址列表
            addressList: [
                { name: "麓谷小镇", flag: false },
                { name: "中电软件园", flag: false },
                { name: "军民融合产业园", flag: false },
                { name: "信息产业园", flag: false },
                { name: "中电软件园二期", flag: false },
                { name: "国家安全信息中心", flag: false },
            ],
            topicList: [
                { name: "找工作", flag: false },
                { name: "暑假工", flag: false },
                { name: "超市限定", flag: false },
                { name: "互联网从业者", flag: false },
            ],
            //接收谁可以看数据
            allowedPersonParams: [],
            addPositionParams: [],
            topicSelected: [],
            selectImagesAdded: [],
            describe: '',
            typeArr: '',
            contents: '',
            contentss: [],
            uploadImages: [],
            seeCount: 0,
            businessFileremark: [],
            // datas2:[]
            positions: [''],
            location: '',
            placeName: ''
        }
    }

    async publishSocialcircle() {
        if (this.state.showInputValueTitle == '') {
            Layer.showMsg("请填写标题");
            return
        } else {

            // Loading.show()
            if (this.state.selectImagesAdded.length == 0) {
                this.publicSo()
            } else {
                this.state.selectImagesAdded.map(item => {
                    RNFS.readFile(item, 'base64')
                        .then(content => {
                            this.setState({
                                contents: content
                            })

                            console.log("________________________________>")
                            console.log(content.length)
                            console.log(item)
                            this.state.contentss.push(this.state.contents)
                            // console.log(this.state.selectImagesAdded.length)
                            // console.log(this.state.contentss.length)
                            if (this.state.selectImagesAdded.length === this.state.contentss.length) {
                                // this.state.contentss.map(async (item, index) => {
                                let i = this.state.contentss.length;
                                let j = 0;
                                // await timeout(2000)
                                if (i > j) {
                                    this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                        // this.state.index = index
                                        console.log(j)
                                        if (i > j) {
                                            this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                console.log(j)
                                                if (i > j) {
                                                    this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                        console.log(j)
                                                        if (i > j) {
                                                            this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                                console.log(j)
                                                                if (i > j) {
                                                                    this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                                        console.log(j)
                                                                        if (i > j) {
                                                                            this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                                                console.log(j)
                                                                                if (i > j) {
                                                                                    this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                                                        console.log(j)
                                                                                        if (i > j) {
                                                                                            this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                                                                console.log(j)
                                                                                                if (i > j) {
                                                                                                    this.uploadDatasbase(this.state.contentss[j++]).then(() => {
                                                                                                        console.log(j)
                                                                                                    })
                                                                                                }
                                                                                            })
                                                                                        }
                                                                                    })
                                                                                }
                                                                            })
                                                                        }
                                                                    })
                                                                }
                                                            })
                                                        }
                                                    })
                                                }
                                            })
                                        }
                                    })
                                }

                                console.log("hello")
                                // })
                            }
                        })
                })
            }

            this.props.navigation.goBack()
        }

    }

    async location() {
        await GetLocation();
        setTimeout(() => {
            if (Object.keys(GetLocation()._55).length > 0) {
                this.setState({
                    positions: GetLocation()._55.positions.pois
                })
                this.setState({
                    location: this.state.positions[0].location,
                    // placeName: this.state.positions[0].name,
                })
                console.log('@@@@@@@@@@@@@@@');
                console.log(this.state.positions[0]);
            } else {
                alert("获取地址失败，请重新进入系统！")
            }
        }, 3000)
    }


    async uploadDatasbase(item) {
        console.log("------------------------>")
        const res = await fetchWebApi(POST_ALBUMINFDOATA_UPLOAD, {
            token: await getStorageValue(Constant.TOKEN),
            fileContent: item,
            type: this.state.typeArr
        }, 'POST')
        console.log('################ upload');
        // console.log(res);
        this.state.uploadImages.push(res.url)

        // console.log('1231231231231312312312312')
        // console.log(this.state.uploadImages);
        // console.log("-------------------->")
        // console.log(this.state.selectImagesAdded)
        if (this.state.uploadImages.length == this.state.contentss.length) {
            this.publicSo()
        }

    }

    async publicSo() {

        let BusinessBaseInfoPriveDto = {
            token: await getStorageValue(Constant.TOKEN),
            showInputValueTitle: this.state.showInputValueTitle,
            showInputValueContent: this.state.showInputValueContent,
            topicSelected: this.state.topicSelected,
            uploadImages: this.state.uploadImages,
            seeCount: this.state.allowedPersonParams.id,
            businessFileremark: this.state.businessFileremark,
            placeName: this.state.placeName,
            location: this.state.location,
        };
        console.log('卧室总分吗')
        console.log(BusinessBaseInfoPriveDto)
        const res = await fetchWebApi(POST_USER_SOCIALCIRCLE, BusinessBaseInfoPriveDto, 'POST');
        // console.log("########## getUserMaillist########5");
        // console.log(res);
        if (res.status == 200) {
            // Loading.hide()
            // this.props.navigation.goBack()
            // console.log(this.state.DATAS)
            this.setState({
                // showInputValueTitle: res.data
            })
            Layer.showMsg("发布成功");
        }
        // else if (this.state.showInputValueTitle == '') {
        //     Layer.showMsg("请填写标题");
        // } 
        else {
            Layer.showMsg("发布失败");
        }
    }



    async getSocialCirclePublisTopic(item) {
        const res = await fetchWebApi(GET_USER_SOCIALCIRCLEPUBLISH_TOPIC, { token: await getStorageValue(Constant.TOKEN) }, 'GET');
        console.log("########## getSocialCirclePublisTopic");
        console.log(res);
        if (res.status == 200) {
            this.setState({
                topicList: res.data
            })
        } else {
            Layer.showMsg("获取用户信息列表失败");
        }
    }

    componentDidMount = () => {
        this.location()
        this.getSocialCirclePublisTopic()
        // console.log(this.state.selectItem_person)
    }
    componentDidUpdate = () => {
        // console.log('我是传过来的描述')
        console.log("凸凸凸凸凸凸凸凸凸");
        console.log(this.state.selectImagesAdded);
        // console.log(this.state.businessFileremark)
    }

    // _selectItemPress(item) {
    //     if (item.select) {
    //         this.state.selectImagesAdded.splice(this.state.selectImagesAdded.findIndex(function (x) {
    //             return x === item.id;
    //         }), 1);
    //     } else {
    //         this.state.selectImagesAdded.push(item);
    //     }
    //     this.state.topicList[item.id].select = !item.select;
    //     this.setState({ topicList: this.state.topicList })
    // }

    //地址选中
    addresssSelect(name, index) {
        this.state.addressList.map((item, _index) => {
            if (index == _index) {
                this.setState({
                    flag: (item.flag = !item.flag)
                })
            } else {
                this.setState({
                    flag: (item.flag = false)
                })
            }
        })
    }

    //话题添加
    topicSelectedPush(item) {
        if (this.state.topicSelected.indexOf(item) == -1) {
            if (this.state.topicSelected.length < 3) {
                return (
                    this.setState({
                        push: this.state.topicSelected.push(item),
                        // pushName: this.state.topicSelected.map((item, index) => {
                        //     this.state.topicSelectedName.push(item.name)
                        // })
                    }),
                    console.log(this.state.topicSelected)
                    // console.log(this.state.topicSelectedName)

                ),
                    this.setState({
                        isTopicListShow: !this.state.isTopicListShow,
                        addLabel: ''
                    })
            } else {
                Layer.showMsg("只能添加3个标签")
            }

            this.setState({
                isTopicListShow: !this.state.isTopicListShow,
                addLabel: ''
            })

        } else {
            Layer.showMsg("不能添加重复标签哦~"),
                this.setState({
                    isTopicListShow: !this.state.isTopicListShow,
                    addLabel: ''
                })
        }
    }

    //话题删除
    topicSelectedSplice(index) {

        this.setState({
            splice: this.state.topicSelected.splice(index, 1)
        })
        console.log(this.state.topicSelected);
    }

    //图片删除
    imageDelete(index) {
        this.setState({
            delete: this.state.uploadImages.splice(index, 1),
            delete: this.state.selectImagesAdded.splice(index, 1),
        }),
            console.log(this.state.uploadImages);
        console.log(this.state.selectImagesAdded);
    }

    //获取标题文本
    getTitleTexts(text) {
        this.setState({
            showInputValueTitle: text
        })
        console.log(this.state.showInputValueTitle);
    }

    //获取正文文本
    getContentTexts(text) {
        this.setState({
            showInputValueContent: text
        })
        console.log(this.state.showInputValueContent);
    }

    //获取添加话题文本
    getLabelTexts(text) {
        this.setState({
            addLabel: text
        })
        console.log(this.state.addLabel);
    }

    render() {
        return (
            <SafeAreaView style={{ flex: 1 }}>
                <Loading />
                <View style={styles.statusBar} />

                {/* 头部组件 */}
                <View style={styles.header}>
                    <TouchableOpacity onPress={() => { this.props.navigation.navigate("SocialcircleTab") }}>
                        <Text style={{
                            color: " rgba(102, 102, 102, 1)"
                        }}>{this.state.leftItem}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.publish_socialcircle}>
                        <Text style={styles.publish_socialcircle_font}>{this.state.title}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => {
                        console.log("aaa")
                        // this.props.navigation.state.params.handleRefresh()

                        this.publishSocialcircle()
                    }}>
                        <Text style={{
                            color: " rgba(24, 144, 255, 1)"
                        }}>{this.state.rightItem}</Text>
                    </TouchableOpacity>
                </View>

                {/* 发布内容 */}
                <ScrollView>
                    <View style={styles.publish_container}>

                        {/* 标题 */}
                        <TextInput
                            multiline={true}
                            placeholder={"填写标题，让更多人感兴趣~"}
                            style={styles.publish_title}
                            onChangeText={(text) => this.getTitleTexts(text)}
                            maxLength={30} />

                        {/* 文本内容 */}
                        <TextInput
                            multiline={true}
                            numberOfLines={1}
                            placeholder="添加正文"
                            editable={true}//是否可编辑
                            style={{ paddingBottom: 130 }}
                            onChangeText={(text) => this.getContentTexts(text)}
                            maxLength={this.state.inputMaxLength}
                        />


                        <View style={styles.topic_total}>

                            {/* 点击话题展开列表 */}
                            <View style={styles.row}>
                                <TouchableOpacity style={styles.topic} onPress={() => {
                                    this.setState({
                                        isTopicListShow: !this.state.isTopicListShow
                                    })
                                }}>
                                    <Text style={{ color: "rgba(102, 102, 102, 1)" }}>#话题</Text>
                                </TouchableOpacity>

                                {/* 选中话题列表渲染 */}
                                {this.state.topicSelected.map((item, index) => (
                                    <TouchableOpacity
                                        style={styles.topicSelected}
                                        key={index}
                                        onPress={() => {
                                            this.topicSelectedSplice(index)
                                        }}
                                    >
                                        <Text>#{item}</Text>
                                    </TouchableOpacity>
                                ))}
                            </View>

                            {/* 正文文本总字数 */}
                            <TouchableOpacity>
                                <Text>
                                    {this.state.showInputValueContent.split('').length}
                                    {/* {this.state.showInputValueContent.length} */}
                                    /{this.state.inputMaxLength}</Text>
                            </TouchableOpacity>
                        </View>

                        {/* 话题列表 */}
                        <View style={this.state.isTopicListShow ? styles.warperModal : { display: "none" }} >
                            <ScrollView style={styles.modalStyle} showsHorizontalScrollIndicator={false} horizontal={true}>
                                {this.state.topicList.map((item, index) => (
                                    <TouchableOpacity style={{ marginRight: 20 }} key={index} onPress={() => {
                                        this.topicSelectedPush(item.businessLabel)
                                    }}>
                                        <View style={styles.modalItem}>
                                            <Text style={styles.textModal}>#{item.businessLabel}</Text>
                                        </View>
                                    </TouchableOpacity>
                                )

                                )}

                            </ScrollView>
                            <View style={{ backgroundColor: "#f2f2f2", display: "flex", flexDirection: 'row', alignItems: 'center', height: 40, marginTop: 10 }}>
                                <TextInput
                                    maxLength={5}
                                    style={styles.designLabel}
                                    placeholder='#自己写一个话题吧~'
                                    onChangeText={(text) => this.getLabelTexts(text)}
                                    value={this.state.addLabel}
                                />
                                <TouchableOpacity
                                    style={styles.confirmLabel}
                                    onPress={() => {
                                        this.topicSelectedPush(this.state.addLabel)
                                    }}
                                >
                                    <Text style={{ color: 'white' }}>确定</Text>
                                </TouchableOpacity>
                            </View>
                        </View>

                        {/* 图片内容 */}
                        <View style={styles.publish_image_box}>

                            {/* 遍历上传的图片，限数为9 */}
                            {this.state.selectImagesAdded.map((item, index) => (
                                <View style={styles.publish_imageBoxer} key={index}>
                                    <TouchableOpacity style={styles.publish_imageBox} key={index}
                                        // onPress={() => { this.props.navigation.navigate("FlatlistDemo") }}
                                        onPress={() => {
                                            this.props.navigation.navigate("uploadAddDescribe", {
                                                delivery: item,
                                                describe: this.state.businessFileremark[index],
                                                // callBack获取子页面数据
                                                callBack: (describe) => {
                                                    this.setState({
                                                        describe: describe
                                                    })
                                                    this.state.businessFileremark[index] = describe
                                                }
                                            })
                                        }}
                                    >
                                        <Image source={{ uri: item }} style={styles.publish_image} />

                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={styles.imageDeleteBox}
                                        onPress={() => {
                                            this.imageDelete(index)
                                        }}>
                                        <Image source={this.state.imageDelete} style={styles.imageDelete} />
                                    </TouchableOpacity>
                                </View>
                            )
                            )}

                            {/* 添加图片 */}
                            <TouchableOpacity
                                style={styles.publish_imageBoxer}
                                onPress={() => {
                                    ImagePicker.openPicker({
                                        // cropping: true,
                                        multiple: true,
                                        mediaType: 'photo',
                                    }).then(images => {

                                        images.map((item, index) => {
                                            this.setState({

                                            })
                                            if (this.state.selectImagesAdded.length < 9) {
                                                console.log("图片")
                                                this.state.selectImagesAdded.push(item.path)
                                                console.log("nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn----------->")
                                                console.log(this.state.selectImagesAdded)
                                                // console.log(images);
                                            } else {

                                                // this.state.selectImagesAdded.splice(9, 100)
                                                Layer.showMsg("只能添加9个图片")
                                            }
                                        })

                                        this.state.selectImagesAdded.map(item => {
                                            let len = []
                                            len.push(item.split('.'))
                                            len.map(item2 => {
                                                this.setState({
                                                    typeArr: item2[item2.length - 1]
                                                })
                                            })
                                            console.log(11111111)
                                            console.log(item)

                                            // console.log(this.state.typeArr)
                                            // RNFS.readFile(item, 'base64')
                                            //     .then(content => {
                                            //         this.setState({
                                            //             contents: content
                                            //         })
                                            //         this.state.contentss.push(this.state.contents)
                                            //     })
                                            // console.log(2222222)
                                            // console.log(this.state.contentss.length)
                                        })

                                        // this.uploadDatasbase()

                                    })
                                        .catch(err => {
                                            console.log(err);
                                        })
                                }}>
                                <Image source={require("../../assets/images/socialcircle/more_picture.png")} style={styles.publish_image_add} />
                            </TouchableOpacity>
                        </View>

                        {/* 添加定位 */}
                        <TouchableOpacity style={styles.add_position} onPress={() => {
                            this.props.navigation.navigate("addPosition", {
                                addPositionParams: {},
                                // callBack获取子页面数据
                                callBack: (addPositionParams) => {
                                    this.setState({
                                        placeName: addPositionParams.name,
                                        location: addPositionParams.location
                                    })
                                }
                            })
                        }}>
                            <View style={styles.add_position_left}>
                                <Image source={require("../../assets/images/socialcircle/add_location.png")} style={styles.publish_icon} />
                                <Text style={styles.add_position_font}>{this.state.placeName == "" ? "添加定位" : socialEllipsis(this.state.placeName)}</Text>
                            </View>

                            <Image source={require("../../assets/images/socialcircle/right_arrow.png")} style={styles.publish_right} />
                        </TouchableOpacity>

                        {/* 选择推荐定位(单选) */}
                        {/* <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                            <View style={styles.location_select}>
                                {this.state.addressList.map((item, index) => (
                                    <TouchableOpacity
                                        style={
                                            this.state.addressList[index].flag ? styles.publish_location_addressOn : styles.publish_location_address
                                        }
                                        key={index}
                                        onPress={() => { this.addresssSelect(item.name, index) }}
                                    >
                                        <Text
                                            style={
                                                this.state.addressList[index].flag ? styles.publish_location_textOn : styles.publish_location_text
                                            }
                                        >
                                            {item.name}
                                        </Text>
                                    </TouchableOpacity>
                                ))}
                            </View>
                        </ScrollView> */}

                        {/* 谁可以看 */}
                        <TouchableOpacity style={styles.allowed_person} onPress={() => {
                            this.props.navigation.navigate("allowedPerson", {
                                allowedPersonParams: {},
                                // callBack获取子页面数据
                                callBack: (allowedPersonParams) => {
                                    this.setState({
                                        allowedPersonParams: allowedPersonParams
                                    })
                                }
                            })
                        }}>
                            <View style={styles.allowed_person_left}>
                                <Image source={require("../../assets/images/socialcircle/lock.png")} style={styles.publish_icon} />
                                <Text style={styles.add_position_font}>{this.state.allowedPersonParams == "" ? "公开·所有人可看" : this.state.allowedPersonParams.describe}</Text>
                            </View>
                            <Image source={require("../../assets/images/socialcircle/right_arrow.png")} style={styles.publish_right} />
                        </TouchableOpacity>

                    </View>

                    <View style={{ height: 100 }}></View>
                </ScrollView>
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    header: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        height: 60,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: "white"
    },
    publish_socialcircle: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    publish_socialcircle_font: {
        fontSize: 20, lineHeight: 30, marginLeft: 5
    },
    publish_imageBoxer: {
        // width: 120,
        // height: 120,
        width: '32%',
        height: 100,
        marginBottom: 10,
        position: "relative"
    },
    publish_image_add: {
        resizeMode: 'contain',
        width: '100%',
        height: 100
    },
    publish_imageBox: {
        // width: 120,
        // height: 120,
        width: '100%',
        height: 100,
        // position: "relative"
    },
    publish_image: {
        // width: 120,
        // height: 120,
        width: '100%',
        height: 100,
        borderRadius: 10,
    },
    publish_icon: {
        width: 25,
        height: 25,
        resizeMode: "contain",
    },
    publish_right: {
        width: 15,
        height: 15,
        resizeMode: "contain",
    },
    publish_location_address: {
        paddingLeft: 10,
        paddingRight: 10,
        borderWidth: 1,
        borderColor: "rgba(0, 0, 0, 0.5)",
        borderRadius: 15,
        marginRight: 10,
        marginBottom: 10,
    },
    publish_location_addressOn: {
        paddingLeft: 10,
        paddingRight: 10,
        borderWidth: 1,
        borderColor: "rgba(0, 0, 0, 0.5)",
        borderRadius: 15,
        marginRight: 10,
        marginBottom: 10,
        backgroundColor: "rgba(225, 240, 255, 1)"
    },
    publish_location_text: {
        color: "rgba(0, 0, 0, 0.5)"
    },
    publish_location_textsOn: {
        color: "rgba(225, 240, 255, 1)",
    },
    publish_container: {
        marginLeft: 15, marginRight: 15
    },
    publish_title: {
        borderBottomWidth: 0.6, borderBottomColor: "rgba(0, 0, 0, 0.08)", fontSize: 16
    },
    topic_total: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingBottom: 10,
        borderBottomWidth: 0.6,
        borderBottomColor: "rgba(0, 0, 0, 0.08)",
        fontSize: 16
    },
    topic: {
        backgroundColor: "white", padding: 5
    },
    topicSelected: {
        padding: 5,
        marginLeft: 5
    },
    publish_image_box: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        flexWrap: "wrap",
        width: "100%",
        marginTop: 20,
        marginBottom: 20
    },
    imageDeleteBox: {
        // width: 20,
        // height: 20,
        position: "absolute",
        top: -5,
        right: -5,
        zIndex: 1
    },
    imageDelete: {
        width: 20,
        height: 20,
        resizeMode: "contain",

    },
    add_position: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 30
    },
    add_position_left: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    add_position_font: {
        fontSize: 20, marginLeft: 10
    },
    location_select: {
        display: "flex",
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "center",
        paddingBottom: 20
    },
    allowed_person: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    allowed_person_left: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    allowed_person_font: {
        fontSize: 20, marginLeft: 10
    },
    statusBar: {
        width: width,
        height: statusBarHeight,
        backgroundColor: 'transparent',
    },
    warperModal: {
        // height: "100%",
        backgroundColor: "rgba(100,100,100,0.2)",
        borderBottomWidth: 0.6,
        borderBottomColor: "rgba(0, 0, 0, 0.08)",
    },
    modalStyle: {
        // paddingLeft: 10,
        // paddingRight: 10,
        // height: 100,

        backgroundColor: "#f2f2f2",
        // borderRadius: 5,
        position: "relative",
        zIndex: 10,
        // top: "47%",
        // left: "5%"
    },
    modalItem: {
        height: 40,
        // borderBottomColor: "rgba(230,230,230,05)",
        // borderBottomWidth: 0.5,
        flexDirection: "column",
        // alignItems: "center",
        justifyContent: "space-evenly"
    },
    designLabel: {
        // backgroundColor: "#f2f2f2",
        width: '50%'
    },
    confirmLabel: {
        width: '15%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5,
        backgroundColor: " rgba(24, 144, 255, 1)",
        borderRadius: 5,
    },
    textModal: {
        fontSize: 14,
        // color: "#797979"
    },
    row: {
        flex: 1,
        flexDirection: "row",
        flexWrap: "wrap"
    },
})
